<template>
  <el-card class="!border-none" shadow="never">
    <el-alert type="warning" :closable="false" show-icon>
      <template #title> 温馨提示：暂无 </template>
    </el-alert>
    <el-form
      ref="formRef"
      class="mb-[-16px] mt-[15px]"
      :inline="true"
      :model="queryParams"
    >
      <el-form-item label="活动名称" prop="name">
        <el-input
          placeholder="请输入活动名称"
          v-model="queryParams.activity_name"
        ></el-input>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input
          placeholder="请输入商品名称/编号"
          v-model="queryParams.goods_info"
        ></el-input>
      </el-form-item>
      <el-form-item label="活动时间" prop="name">
        <daterange-picker
          class="w-[385px]"
          v-model:startTime="queryParams.start_time"
          v-model:endTime="queryParams.end_time"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="resetPage">查询</el-button>
        <el-button @click="resetParams">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <el-card class="!border-none mt-4" shadow="never">
    <!-- 导航栏 -->
    <el-tabs
      v-model="queryParams.status"
      class="demo-tabs"
      @tab-click="handleTabclick"
    >
      <el-tab-pane :label="`全部(${pager.extend.all || '0'})`" :name="0" />
      <el-tab-pane :label="`未开始(${pager.extend.not || '0'})`" :name="1" />
      <el-tab-pane
        :label="`进行中(${pager.extend.conduct || '0'})`"
        :name="2"
      />
      <el-tab-pane :label="`已结束(${pager.extend.end || '0'})`" :name="3" />
      <router-link
        :to="{
          path: getRoutePath('marketing.seckill.add'),
        }"
      >
        <el-button
          class="w-[84px] h-[30px] mb-[9px] text-[12px] ml-2"
          type="primary"
        >
          新增限购活动
        </el-button>
      </router-link>

      <!-- 表格 -->
      <el-table size="large" :data="pager.lists">
        <el-table-column label="活动名称" prop="name" />
        <el-table-column label="活动时间" prop="activity_time" />
        <el-table-column label="抢购订单" prop="closing_order">
        </el-table-column>
        <el-table-column label="抢购销售量" prop="sales_volume">
        </el-table-column>
        <el-table-column label="抢购销售额">
          <template #default="{ row }"> ￥{{ row.sales_amount }} </template>
        </el-table-column>
        <el-table-column label="抢购状态">
          <template #default="{ row }">
            <el-tag
              class="ml-2"
              type="success"
              v-if="row.status_text === '进行中'"
              >{{ row.status_text }}</el-tag
            >
            <el-tag
              class="ml-2"
              type="danger"
              v-if="row.status_text === '未开始'"
              >{{ row.status_text }}</el-tag
            >
            <el-tag
              class="ml-2"
              type="info"
              v-if="row.status_text === '已结束'"
              >{{ row.status_text }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="create_time" />

        <el-table-column label="操作" min-width="160" fixed="right">
          <template #default="{ row }">
            <router-link
              :to="{
                path: getRoutePath('marketing.seckill.add'),
                query: {
                  id: row.id,
                  detail: 1,
                  status: row.status,
                },
              }"
            >
              <el-button v-if="row.root != 1" type="primary">
                详情
              </el-button>
            </router-link>
            <router-link
              :to="{
                path: getRoutePath('marketing.seckill.add'),
                query: {
                  id: row.id,
                  detail: 0,
                  status: row.status,
                },
              }"
            >
              <el-button v-if="row.root != 1" type="primary">
                编辑
              </el-button>
            </router-link>
            <el-button
              type="primary"
              @click="handlestart(row.id)"
              v-if="row.status_text === '未开始'"
            >
              开始抢购
            </el-button>
            <el-button
              type="primary"
              @click="handleover(row.id)"
              v-if="row.status_text === '进行中'"
            >
              结束抢购
            </el-button>

            <el-button
              v-if="row.root != 1"
              type="danger"
              @click="handledel(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
    <!-- 分页 -->
    <div class="flex justify-end mt-4">
      <pagination v-model="pager" @change="getLists" />
    </div>
  </el-card>
</template>
<script setup lang="ts">
import {
  getseckilllists,
  startseckill,
  overseckill,
  delseckill,
} from "@/api/application";
import { usePaging } from "@/hooks/usePaging";
import { getRoutePath } from "@/router";

const queryParams = reactive({
  status: 0,
  activity_name: "",
  goods_info: "",
  start_time: "",
  end_time: "",
});
const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: getseckilllists,
  params: queryParams,
});
getLists();
//切换导航栏
const handleTabclick = async () => {
  await nextTick();
  getLists();
};
const handlestart = async (id: number) => {
  await startseckill({ id });
  getLists();
};
const handleover = async (id: number) => {
  await overseckill({ id });
  getLists();
};
const handledel = async (id: number) => {
  await delseckill({ id });
  getLists();
};
</script>

<style lang="scss" scope>
//TODO
.el-alert--warning.is-light {
  background-color: rgba(246, 248, 255, 1);
  color: rgba(64, 115, 250, 1);
}
</style>
